<template>
    <div class="activity-history-page">
        <van-nav-bar title="Activity History" left-text="Back" left-arrow @click-left="$router.back()" />

        <div class="activity-content">
            <!-- Filter Options -->
            <div class="filter-section">
                <van-dropdown-menu>
                    <van-dropdown-item v-model="selectedType" :options="typeOptions" />
                    <van-dropdown-item v-model="selectedPeriod" :options="periodOptions" />
                </van-dropdown-menu>
            </div>

            <!-- Activity List -->
            <div class="activity-list">
                <div v-for="activity in filteredActivities" :key="activity.id" class="activity-item">
                    <div class="activity-icon">
                        <van-icon :name="activity.icon" :color="activity.color" />
                    </div>
                    <div class="activity-content">
                        <div class="activity-header">
                            <h3 class="activity-title">{{ activity.title }}</h3>
                            <span class="activity-time">{{ formatTime(activity.timestamp) }}</span>
                        </div>
                        <p class="activity-description">{{ activity.description }}</p>
                        <div v-if="activity.details" class="activity-details">
                            <div v-for="detail in activity.details" :key="detail.label" class="detail-item">
                                <span class="detail-label">{{ detail.label }}:</span>
                                <span class="detail-value">{{ detail.value }}</span>
                            </div>
                        </div>
                        <div v-if="activity.points" class="activity-points">
                            +{{ activity.points }} points
                        </div>
                    </div>
                </div>
            </div>

            <!-- Load More -->
            <div v-if="hasMore" class="load-more">
                <van-button type="default" block @click="loadMore">
                    Load More Activities
                </van-button>
            </div>

            <!-- Empty State -->
            <div v-if="filteredActivities.length === 0" class="empty-state">
                <van-empty description="No activities found">
                    <van-button type="primary" size="small" @click="startActivity">
                        Start Training
                    </van-button>
                </van-empty>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

interface Activity {
    id: string
    type: string
    title: string
    description: string
    timestamp: number
    icon: string
    color: string
    points?: number
    details?: Array<{
        label: string
        value: string
    }>
}

const selectedType = ref('all')
const selectedPeriod = ref('all')
const hasMore = ref(true)

const typeOptions = [
    { text: 'All Activities', value: 'all' },
    { text: 'Training', value: 'training' },
    { text: 'Achievements', value: 'achievement' },
    { text: 'Community', value: 'community' },
    { text: 'Challenges', value: 'challenge' }
]

const periodOptions = [
    { text: 'All Time', value: 'all' },
    { text: 'This Week', value: 'week' },
    { text: 'This Month', value: 'month' },
    { text: 'Last 3 Months', value: '3months' }
]

const activities = ref<Activity[]>([
    {
        id: '1',
        type: 'training',
        title: 'Completed Training Session',
        description: 'Successfully completed Job Interview scenario with Sarah Chen',
        timestamp: Date.now() - 2 * 60 * 60 * 1000, // 2 hours ago
        icon: 'play-circle-o',
        color: '#07c160',
        points: 150,
        details: [
            { label: 'Duration', value: '15 minutes' },
            { label: 'Score', value: '85%' },
            { label: 'Skills', value: 'Communication, Confidence' }
        ]
    },
    {
        id: '2',
        type: 'achievement',
        title: 'Achievement Unlocked',
        description: 'Earned the "Confident Speaker" badge for excellent presentation skills',
        timestamp: Date.now() - 5 * 60 * 60 * 1000, // 5 hours ago
        icon: 'medal-o',
        color: '#f39c12',
        points: 100
    },
    {
        id: '3',
        type: 'community',
        title: 'Posted in Community',
        description: 'Shared your experience: "My First Job Interview Success Story"',
        timestamp: Date.now() - 8 * 60 * 60 * 1000, // 8 hours ago
        icon: 'edit',
        color: '#1989fa',
        points: 25,
        details: [
            { label: 'Likes', value: '12' },
            { label: 'Comments', value: '5' }
        ]
    },
    {
        id: '4',
        type: 'challenge',
        title: 'Daily Challenge Completed',
        description: 'Completed "Practice Active Listening" challenge',
        timestamp: Date.now() - 24 * 60 * 60 * 1000, // 1 day ago
        icon: 'star-o',
        color: '#9c26b0',
        points: 50,
        details: [
            { label: 'Progress', value: '5/5 conversations' }
        ]
    },
    {
        id: '5',
        type: 'training',
        title: 'Training Session Started',
        description: 'Started Networking Event scenario with Marcus Johnson',
        timestamp: Date.now() - 2 * 24 * 60 * 60 * 1000, // 2 days ago
        icon: 'play-circle-o',
        color: '#07c160'
    },
    {
        id: '6',
        type: 'community',
        title: 'Liked a Post',
        description: 'Liked "Tips for Overcoming Social Anxiety" by @sarah_m',
        timestamp: Date.now() - 3 * 24 * 60 * 60 * 1000, // 3 days ago
        icon: 'good-job-o',
        color: '#ee0a24'
    }
])

const filteredActivities = computed(() => {
    let filtered = activities.value

    // Filter by type
    if (selectedType.value !== 'all') {
        filtered = filtered.filter(activity => activity.type === selectedType.value)
    }

    // Filter by period
    if (selectedPeriod.value !== 'all') {
        const now = Date.now()
        const periods = {
            week: 7 * 24 * 60 * 60 * 1000,
            month: 30 * 24 * 60 * 60 * 1000,
            '3months': 90 * 24 * 60 * 60 * 1000
        }
        const periodMs = periods[selectedPeriod.value as keyof typeof periods]
        if (periodMs) {
            filtered = filtered.filter(activity => now - activity.timestamp <= periodMs)
        }
    }

    return filtered.sort((a, b) => b.timestamp - a.timestamp)
})

const formatTime = (timestamp: number) => {
    const now = Date.now()
    const diff = now - timestamp
    const minutes = Math.floor(diff / (1000 * 60))
    const hours = Math.floor(minutes / 60)
    const days = Math.floor(hours / 24)

    if (minutes < 60) {
        return `${minutes}m ago`
    } else if (hours < 24) {
        return `${hours}h ago`
    } else if (days < 7) {
        return `${days}d ago`
    } else {
        return new Date(timestamp).toLocaleDateString()
    }
}

const loadMore = () => {
    // Simulate loading more activities
    hasMore.value = false
}

const startActivity = () => {
    router.push('/training')
}
</script>

<style lang="scss" scoped>
.activity-history-page {
    min-height: 100vh;
    background: #f8f9fa;
}

.activity-content {
    padding-bottom: 16px;
}

.filter-section {
    background: white;
    margin-bottom: 8px;
}

.activity-list {
    padding: 0 16px;

    .activity-item {
        display: flex;
        gap: 12px;
        background: white;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;

        .activity-icon {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            background: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;

            .van-icon {
                font-size: 20px;
            }
        }

        .activity-content {
            flex: 1;

            .activity-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 4px;

                .activity-title {
                    font-size: 16px;
                    font-weight: 500;
                    color: #323233;
                    margin: 0;
                }

                .activity-time {
                    font-size: 12px;
                    color: #969799;
                    flex-shrink: 0;
                    margin-left: 8px;
                }
            }

            .activity-description {
                font-size: 14px;
                color: #646566;
                line-height: 1.4;
                margin: 0 0 8px 0;
            }

            .activity-details {
                margin-bottom: 8px;

                .detail-item {
                    display: inline-block;
                    margin-right: 16px;
                    font-size: 12px;

                    .detail-label {
                        color: #969799;
                    }

                    .detail-value {
                        color: #323233;
                        font-weight: 500;
                    }
                }
            }

            .activity-points {
                font-size: 12px;
                color: #07c160;
                font-weight: 500;
            }
        }
    }
}

.load-more {
    padding: 0 16px;
    margin-top: 16px;
}

.empty-state {
    padding: 40px 16px;
}

:deep(.van-dropdown-menu) {
    box-shadow: none;
}
</style>